<template>
  <n-collapse>
    <!-- 基于Nano ID的ID生成器 -->
    <n-collapse-item name="nanoId">
      <!-- 自定义标题 -->
      <template #header> ID生成器(基于Nano ID) &nbsp;&nbsp; <n-icon :component="IdIcon" :size="25" /></template>
      <!-- 自定义标题额外内容 -->
      <template #header-extra>v5.1.5</template>
      <!-- 自定义内容 -->
      <div>
        <!-- 警告 -->
        <n-alert title="警告" type="warning">
          1. 在极少数情况下，当收集硬件随机生成器的噪声时，可能会阻塞CPU，导致无法进行其他工作。
          <br />
          2. 默认字符集：useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict
        </n-alert>
        <!-- 生成器 -->
        <div class="grid grid-cols-7 items-center mt-2 mb-2">
          <!-- 自定义字符集 -->
          <span class="text-center">自定义字符集：</span>
          <n-input class="col-span-3" v-model:value="customeNanoAlphabet" placeholder="如果为空，则使用默认字符集" />
          <!-- 自定义长度 -->
          <span class="text-center">自定义长度：</span>
          <n-input-number v-model:value="nanoIdLength" />
          <!-- 生成按钮 -->
          <n-button class="ml-2!" ghost @click="generateNanoId">生成Id</n-button>
        </div>
        <!-- 生成结果 -->
        <div class="flex justify-center items-center copy-card">
          {{ nanoIdResult }}
          <n-button :disabled="nanoIdResult === ''" class="ml-2!" type="primary" @click="copyNanoId">复制</n-button>
        </div>
      </div>
    </n-collapse-item>

    <!-- 基于md5.js的MD5加密 -->
    <n-collapse-item name="md5">
      <!-- 自定义标题 -->
      <template #header> MD5加密(基于md5) &nbsp;&nbsp; <n-icon :component="MD5Icon" :size="30" /></template>

      <!-- 自定义标题额外内容 -->
      <template #header-extra>v2.3.0</template>
      <!-- 自定义内容 -->
      <div>
        <!-- 字符加密 -->
        <n-input v-model:value="md5String" type="textarea" placeholder="请输入要加密的字符串" @change="encryptMd5String" />

        <!-- 分割线 -->
        <n-divider />

        <!-- 文件加密 -->
        <n-upload :default-upload="false" :max="1" accept=".xlsx,.xls" @change="encryptMd5File">
          <n-button>上传文件</n-button>
        </n-upload>

        <!-- 生成结果 -->
        <div class="flex justify-center items-center copy-card">
          {{ md5Result }}
          <n-button :disabled="md5Result === ''" class="ml-2!" type="primary" @click="copyMd5">复制</n-button>
        </div>
      </div>
    </n-collapse-item>
  </n-collapse>
</template>

<script lang="ts" setup>
import { useConfigStore } from "@renderer/store/config";
import { nanoid, customAlphabet } from "nanoid";
import md5 from "md5";
import IdIcon from "./components/IdIcon.vue";
import MD5Icon from "./components/MD5Icon.vue";
import { UploadFileInfo } from "naive-ui";

/* *****************************通用属性/方法***************************** */
// 全局配置
const useConfig = useConfigStore();
// 消息提示
const message = useMessage();

// 背景颜色
const backgroundColor = computed(() => {
  return useConfig.theme === "dark" ? "#737373" : "#f5f5f5";
});
// 文字颜色
const textColor = computed(() => {
  return useConfig.theme === "dark" ? "#f5f5f5" : "#737373";
});

/* *****************************基于Nano ID的ID生成器***************************** */
// nanoid的长度(默认长度21)
const nanoIdLength = ref(21);
// nanoid的自定义字母
const customeNanoAlphabet = ref("");
// nanoId的自定义字母
const nanoIdResult = ref("");

// 生成nanoId
const generateNanoId = () => {
  // 是否使用自定义字符集
  if (customeNanoAlphabet.value == "") {
    // 生成默认长度的nanoId
    nanoIdResult.value = nanoid(nanoIdLength.value);
  } else {
    //   生成自定义长度的nanoId
    const customNanoId = customAlphabet(customeNanoAlphabet.value, nanoIdLength.value);
    nanoIdResult.value = customNanoId();
  }
};

// 复制nanoId
const copyNanoId = () => {
  if (nanoIdResult.value === "") {
    return;
  }
  // 复制nanoId
  navigator.clipboard.writeText(nanoIdResult.value);
  // 提示用户复制成功
  message.success("复制成功");
};

/* *****************************基于md5.js的MD5加密***************************** */
// md5字符加密
const md5String = ref("");
// md5加密结果
const md5Result = ref("");

// 字符串加密md5
const encryptMd5String = () => {
  md5Result.value = md5(md5String.value);
};
// 文件加密md5
const encryptMd5File = async (options: { file: UploadFileInfo; fileList: Array<UploadFileInfo>; event?: Event }) => {
  // 文件变化检测
  if (options.fileList.length == 0) {
    md5Result.value = "";
    return;
  }

  // blob转为arrayBuffer
  const arrayBuffer = await options.file.file!.arrayBuffer();
  // arrayBuffer转为uint8Array
  const uint8Array = new Uint8Array(arrayBuffer);

  // 字符串加密md5
  md5Result.value = md5(uint8Array);
};

// 复制md5
const copyMd5 = () => {
  if (md5Result.value === "") {
    return;
  }
  // 复制md5
  navigator.clipboard.writeText(md5Result.value);
  // 提示用户复制成功
  message.success("复制成功");
};
</script>

<style lang="scss" scoped>
.copy-card {
  padding: 10px;
  border-radius: 5px;
  background-color: v-bind(backgroundColor);
  color: v-bind(textColor);
}
</style>
